<route>
    {
        meta: {
            layout: 'index',
            title:'职级管理'
        }
    }  
</route>
<template>
    <view>
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="6" :xs="24">
                <JobTypeSelect @confirm="typeConfirm" />
            </el-col>
            <el-col :span="18" :xs="24">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain :icon="Plus" @click="doCreate" v-isAdmin>新增</el-button>
                    </el-col>
                </el-row>
                <!-- 表格数据 -->
                <el-table v-loading="loading" :data="tableData">
                    <el-table-column label="职级分类" prop="jobType" :show-overflow-tooltip="true" width="150" />
                    <el-table-column label="职级名称" prop="jobGradeName" :show-overflow-tooltip="true" width="200" />
                    <el-table-column label="职级编号" prop="jobGradeCode" :show-overflow-tooltip="true" />
                    <el-table-column label="津贴系数" prop="standard" :show-overflow-tooltip="true" />
                    <el-table-column label="职级排序" prop="orderNum" :show-overflow-tooltip="true" />
                    <el-table-column label="状态" align="center" width="100">
                        <template #default="scope">
                            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                @change="handleStatusChange(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
                                <el-button type="text" :icon="Edit" @click="doUpdate(scope.row)"
                                    v-hasPermi="['system:role:update']"></el-button>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
                                <el-button type="text" :icon="Delete" @click="doDelete(scope.row)"
                                    v-hasPermi="['system:role:delete']"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="doQuery" />
            </el-col>
        </el-row>
        <AntdConfirmModal :title="isCreate ? '新建职级' : '更新职级'" ref="jobGradeModalRef"  
            @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 6 }">
                <a-form-item label="职级分类" name="jobTypeId" :rules="[{ required: true, message: '请选择职级分类' }]">
                    <a-select placeholder="请选择职级分类" v-model:value="form.jobTypeId" style="width: 200px"
                        :options="typeOptions"></a-select>
                </a-form-item>
                <a-form-item label="职级名称" name="jobGradeName" :rules="[{ required: true, message: '请输入职级名称' }]">
                    <a-input v-model:value="form.jobGradeName" />
                </a-form-item>
                <a-form-item label="职级编码" name="jobGradeCode" :rules="[{ required: true, message: '请输入职级编码' }]">
                    <a-input v-model:value="form.jobGradeCode" />
                </a-form-item>
                <!-- <a-form-item label="职级系数" name="standard" :rules="[{ required: true, message: '请输入职级系数' }]">
                    <a-input-number v-model:value="form.standard" />
                </a-form-item> -->
                <a-form-item label="职级状态">
                    <a-switch v-model:checked="form.status" :checkedValue="1" :unCheckedValue="0" />
                </a-form-item>
                <a-form-item label="津贴系数" name="standard" :rules="[{ required: true, message: '津贴系数不可为空' }]">
                    <a-input-number v-model:value="form.standard" />
                </a-form-item>
                <a-form-item label="职级排序" name="orderNum">
                    <a-input-number v-model:value="form.orderNum" />
                </a-form-item>
                <a-form-item :name="remark" label="备注">
                    <a-textarea v-model:value="form.remark" />
                </a-form-item>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import JobTypeSelect from './components/JobTypeSelect.vue';
import { createOne, updateOne, deleteOne, queryList, queryOne } from '../../api/job_grade'
import useJobStore from '../../store/job';
const jobStore = useJobStore()
import useApp from '@/hooks'
import { computed, ref } from 'vue';
const { $, proxy } = useApp()
const jobGradeModalRef = ref(null)
const isCreate = ref(true)
const queryParams = ref({
    jobTypeId: undefined,
    pageNum: 1,
    pageSize: 10,
    status: undefined,
    sortBy: 'orderNum'
})
const form = ref({
    jobTypeId: undefined,
    jobGradeName: undefined,
    jobGradeCode: undefined,
    status: 1,
    orderNum: 1,
    standard:0.0
})
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const typeOptions = computed(() => {
    let arr = $.freeStore(jobStore.types);
    arr.map(ele => {
        ele.label = ele.jobTypeName,
            ele.value = ele.id
    })
    return arr
})
function resetForm(){
    form.value = {
    jobTypeId: undefined,
    jobGradeName: undefined,
    jobGradeCode: undefined,
    status: 1,
    orderNum: 1,
    standard:0.0
}
}
//
function typeConfirm(e) {
    queryParams.value.jobTypeId = e
    doQuery()
}


function doUpdate(row) {
    isCreate.value = false

    queryOne(row.id).then(res => {
        form.value = res
        form.value.jobTypeId = res.jobTypeId
        jobGradeModalRef.value.openModal()
    })
}
// 点击删除
function doDelete(row) {
    $.showModal({
        title: '确认提醒',
        type: 'warning',
        content: `是否删除${row.jobGradeName}`,
        cancelText: '取消'
    }).then(r => {
        if (r.confirm) {
            deleteOne(row.id).then(res => {
                $.showToast({
                    title: '删除成功',
                    icon: 'success'
                })
                doQuery()
            })
        } else {

        }
    })
}
// 新增
function doCreate() {
    // 刷新类型
    resetForm()
    isCreate.value = true
    jobGradeModalRef.value.openModal()
}
// 查询
function doQuery() {
    loading.value = true;
    queryList(queryParams.value).then(response => {
        tableData.value = response.content;
        total.value = response.totalElements;
        loading.value = false;
    })
}
// 更新
function handleStatusChange(row) {
    let t = row;
    console.log(t)
    t.status = t.status ? 1 : 0
    updateOne(t).then(res => {
        $.showToast({
            title: '状态修改成功',
            icon: 'success'
        })
        doQuery()
    })
}
// 提交
function submitForm() {
    if (isCreate.value) {
        createOne(form.value).then(res => {
            console.log(res)
            $.showToast({
                title: '创建成功',
                icon: 'success'
            })
            doQuery()
            jobGradeModalRef.value.closeModal()
        })
    } else {
        updateOne(form.value).then(res => {
            console.log(res)
            $.showToast({
                title: '更新成功',
                icon: 'success'
            })
            doQuery()
            jobGradeModalRef.value.closeModal()
        })
    }

}
doQuery()
</script>